<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web 聊天室</title>
</head>
<style type="text/css" media="screen">
    *{margin:0;padding:0;}
    #wrap{margin:10px auto; width:80%; height:99%;}
    .unit{margin-bottom:5px; padding:5px; border:solid 1px #000; height:auto;  clear:both;box-sizing:border-box;}
    .unit label{text-align:right;width:100px;line-height: 30px; display:inline-block;}
    .unit input{line-height: 30px; width:100px; height:30px;}
    .log {font-size:11px; font-family:Courier; overflow: auto; height:100%; background:gainsboro;width:85%;float:left}
    .log p{padding:2px;margin:0;}
    .content{width:100%;overflow:hidden;height:80%;margin:0 0 5px 0;}
    .online{width: 15%;height: 100%;float:right;background: #FCFCFC;border:solid 1px #000;box-sizing:border-box;}
</style>
<body>
<div id="wrap" style="height:600px;">
    <div class="unit">
        <label >用户名:</label>
        <input  id="nickname" value=""/>
        <label style="width: 60px;">密码:</label>
        <input  id="password" value ="123"/>
        <input onclick="javascript:conectWebSocket();"  type="button" value="登录" />
        <input onclick="javascript:closeWebSocket();" type="button" value="退出" />
        <input onclick="javascript:showServerConfig(this);" type="button" value="服务器配置" />
    </div>
    <div class="unit" id="serverConfigId" style="display: none;">
        <label >服务器IP:</label>
        <input  id="serverIp" value="192.168.1.235"/>
        <label>端口号:</label>
        <input  id="port" value ="8080"/>
    </div>
    <div class="unit">
        <label>聊天记录:</label>
        <input type="button" value="清空记录" onclick="clearLogs();"/>
        <input type="button" value="鉴权命令" onclick="authCmd();"/>
        <input type="button" value="心跳命令" onclick="heartbeatCmd();"/>
        <input type="button" value="获取指定好友历史消息" onclick="friendHistoryCmd();" style="width: 150px;"/>
        <input id="history_friend_id" style="width:100px;" placeholder="输入好友ID"/>
        <input type="button" value="获取指定群组历史消息" onclick="groupHistoryCmd();" style="width: 150px;"/>
        <input id="history_group_id" style="width:100px;" placeholder="输入群组ID"/>
    </div>
    <div class="content">
        <div id="logs" class="unit log">
        </div>
        <div id="onlinePanel" class="online">
            &nbsp;在线成员(0/0)
        </div>
    </div>
    <div class="unit">
        <label >输入内容:</label>
        <input id="content" style="width:500px;" onkeydown="keyDown(event)"/>
        <input onclick="javascript:sendGroup()" id="sendGroupBtn"  type="button"  value="群聊" />&nbsp;<input onclick="javascript:send()" id="sendBtn"  type="button"  value="私聊" />
    </div>
</div>
</body>
<script type="text/javascript">
    var websocket = null;
    // 保存用户信息
    var currUser = null;
    var nickname = "";
    function conectWebSocket(){
        // 用户已登录
        if(currUser != null){
            alert("当前用户已经登录，请退出后再登录！");
            return;
        }

        // 校验用户名是否为空
        nickname = document.getElementById("nickname").value;
        if(nickname == ""){
            alert("请输入昵称");
            return;
        }

        // 判断当前浏览器是否支持websocket
        if("WebSocket" in window){
            websocket = new WebSocket("ws://localhost:8080/websocket/"+nickname)
        }

        // 链接发生错误时回调的方法
        websocket.onerror = function(){
            setMessageInnerHTML("error");
        }

        // 链接成功建立的回调方法
        websocket.onopen = function(event){
            setMessageInnerHTML(nickname+":成功建立链接")
        }

        // 接收到消息的回调方法
        websocket.onmessage = function(event){
            setMessageInnerHTML(event.data);
        }

        // 链接关闭的回调方法
        websocket.onclose = function(){
            setMessageInnerHTML(nickname+":关闭链接")
        }

        // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket链接，防止链接还没有断开就关闭窗口，server端会抛异常
        window.onbeforeunload = function(){
            websocket.close();
        }
    }

    // 将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        document.getElementById("logs").innerHTML += innerHTML + "</br>";
    }

    // 关闭链接
    function closeWebSocket(){
        websocket.close();
    }

    // 发送消息
    function send(){
        var message = document.getElementById("text").value;
        // 接受者
        var toUser = document.getElementById("toUser").value;
        var socketMsg = {msg:message,toUser:toUser};
        if(toUser == ""){
            // 群聊
            socketMsg.type = 0;
        }else{
            // 单聊
            socketMsg.type = 1;
        }
        websocket.send(JSON.stringify(socketMsg));
    }
</script>
</html>